<template>

  <div>
    <!-- 菜单栏 -->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item class="title" disabled><h3>考试通平台</h3></el-menu-item>
      <el-submenu index="1" class="user">
        <template slot="title">
          <el-col :span="12">
            <div class="demo-basic--circle">
              <div class="block"><el-avatar :size="50" :src="image"></el-avatar>
                {{ userInfo.username }}</div>
            </div>
          </el-col>
        </template>
        <el-menu-item @click="userExit">切换账号</el-menu-item>
        <el-menu-item @click="setPasswordFormDialog = true">修改密码</el-menu-item>
      </el-submenu>
    </el-menu>

    <!-- 修改密码的弹窗 -->
    <el-dialog title="修改密码" :visible.sync="setPasswordFormDialog" top="8vh">
      <el-form :model="setPwdForm" size="mini" label-width="80px">
        <el-form-item label="原密码">
          <el-input type="password" v-model="setPwdForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input type="password" v-model="setPwdForm.newPassword" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="setPasswordFormDialog = false">取 消</el-button>
        <el-button type="primary" @click="setPassword">修 改</el-button>
      </div>
    </el-dialog>

  </div>


</template>

<script>
import {Success, Info, Confirm, Warning, Error} from "../../utils/element.config.js";
import { SetPassword } from "../../api/public";

export default {
  data() {
    return {
      activeIndex: '1',
      image: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      setPasswordFormDialog: false,
      setPwdForm: {
        password: '',
        newPassword: ''
      },
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    /** 用户退出 **/
    userExit(){
      Warning("正在退出, 请稍后...");
      sessionStorage.removeItem('token');
      setTimeout(function(){
        window.location.href = '/';
      }, 1000);
    },
    /** 用户修改密码 **/
    setPassword(){

      if( !this.setPwdForm.password || !this.setPwdForm.newPassword )
        return Error("输入框不能为空");

      Confirm("确认进行修改密码", "修改确认").then(() => {

        SetPassword(this.setPwdForm).then(result => {
          if( result.code === 200 ){
            Success("修改成功, 正在退出账号...");
            this.setPasswordFormDialog = false;
            sessionStorage.removeItem('token');
            setTimeout(function(){
              window.location.href = '/';
            }, 1000);
          }else if( result.code === 300 ) {
            Error(result.message)
          }
        }).catch(result => {
          Error(result);
        })

      }).catch(() => {
        Info("取消密码修改");
      })
    }
  },
  props: ['userInfo'],
  watch: {
    setPasswordFormDialog: function(value){
      /* 监听弹窗, 删除表单数据 */
      if( !value ){
        this.setPwdForm.password =
          this.setPwdForm.newPassword = '';
      }
    }
  }
}
</script>

<style scoped>
.el-header ul{
  background-color: transparent !important;
}
/*二级菜单使用了插槽, 需要使用 /deep/ 深度选择器来进行样式修改*/
.el-header ul .user /deep/ div[style]{
  background-color: transparent !important;
}
.user /deep/ .el-col-12{
  width: 100px;
}
.user /deep/ .el-col-12 span{
  margin-right: 8px;
}
.el-menu{
  background-image: linear-gradient(#6B57FF, #409EFF);
}
.title{
  float: left;
  line-height: 30px;
  margin-left: 20px;
  opacity: .9;
  cursor: default;
}
.user{
  position: absolute;
  float: right;
  right: 35px;
}
.el-menu--horizontal ul{
  background-color: #409EFF !important;
}
</style>
